<template>
<div>
  <el-row :gutter="10">
    <el-col :span="6">
      <span @click="() => {this.$router.go(-1)}" class="font-blue my-btn">返回上级</span>
    </el-col>
  </el-row>
  <el-card>
    <el-row class="questDetail" :gutter="10">
      <el-col class="title">{{question_type[question.type]}} -- {{question_difficulty[question.difficulty]}} --- {{question.title}}</el-col>
      <el-col v-if="question.images && question.images.length > 0" class="images">
        <div v-for="(image, imgIdx) in question.images" class="imageWrap">
          <img :src="image.image"></img>
          <div @click="scaleImg(image.image)" class="modal">
            查看大图
          </div>
        </div>
      </el-col>

      <el-col
        v-if="question.type == 'single' || question.type == 'multiple'"
        class="option"
        v-for="(aitem, aindex) in question.content"
        :key="aindex" :span="getRowSpan(question.content.length)">
        <div>{{_index2ABC(aindex)}}.{{aitem.text}}</div>
      </el-col>


      <el-col class="answer">
        <div>答案: {{q_answer}}</div>
      </el-col>
      <el-col class="answer">
        <div>解析: {{question.note ? question.note : '暂无'}}</div>
      </el-col>
    </el-row>
  </el-card>
</div>
</template>

<script>

export default {
  name: 'QuestDetail',
  data () {
    return {
      question_type: {'single': '单选', 'multiple': '多选', 'judge': '判断', 'text': '填空', 'composite': '问答'},
      question_difficulty: {'easy': '简单', 'medium': '中等', 'hard': '困难'},
      question: {}
    }
  },
  computed: {
    q_answer () {
      const {type, content} = this.question
      const answer_arr = []
      if (type == 'single' || type == 'multiple') {
        content.forEach((item, index) => {
          if (item.answer) {
            answer_arr.push(this._index2ABC(index))
          }
        })
        return answer_arr.join(',')
      } else if (type == 'judge') {
        return content.answer == 'yes' ? '正确' : '错误'
      } else if (type == 'text') {
        return content.map(item => item.text).join(' | ')
      } else if (type == 'composite') {
        return content
      }
    }
  },
  created () {
    this._questionid = this.$route.params.id
    this.$API.getQuestion(this._questionid)
    .then(data => {
      console.log(data)
      this.question = data
    })
  },
  methods: {
    getRowSpan (num) {
      return Math.floor(24 / num)
    },
    _index2ABC (index) { // 下标转ABCD选项
      const A_ascii = 65;
      return String.fromCharCode(A_ascii + index);
    },
    scaleImg (url) {
      this.$alert(`<img src="${url}"/>`, {
          dangerouslyUseHTMLString: true,
          customClass: 'scaleBox',
          showClose: false,
          showConfirmButton: false,
          closeOnClickModal: true
        })
    }
  }
}

</script>

<style>
.questDetail {}
.questDetail .title { font-size: 1.2em; }
.questDetail .answer { font-size: 0.9em; }
.questDetail .images { font-size: 0.5em; }
.scaleBox { max-width: 80%; width: auto;}
.scaleBox img { width: 100%;}
.font-blue {
  color: #0366bb;
}
.my-btn {
  cursor: pointer;
}
.imageWrap{float: left;margin: 0 20px !important;}
.imageWrap img{height: 100px !important;}
</style>
